
<template>
  <el-dialog :title="title" :visible.sync="showDialog" :before-close="close">
    <el-form
      ref="form"
      :model="form"
      style="padding: 10px 30px"
      label-width="80px"
      label-position="left"
      :rules="rules"
    >
      <el-form-item label="车辆类型" prop="name">
        <el-input v-model="form.name" placeholder="请输入车辆类型" />
      </el-form-item>
      <el-form-item label="应载重量" prop="allowableLoad">
        <el-input
          v-model.number="form.allowableLoad"
          placeholder="请输入应载重量"
        >
          <template slot="append">吨</template>
        </el-input>
      </el-form-item>
      <el-form-item label="应载体积" prop="allowableVolume">
        <el-input
          v-model.number="form.allowableVolume"
          placeholder="请输入应载体积"
        >
          <template slot="append">立方</template>
        </el-input>
      </el-form-item>
      <el-form-item label="长" prop="measureLong">
        <el-input v-model.number="form.measureLong" placeholder="请输入长">
          <template slot="append">米</template>
        </el-input>
      </el-form-item>
      <el-form-item label="宽" prop="measureWidth">
        <el-input v-model.number="form.measureWidth" placeholder="请输入宽">
          <template slot="append">米</template>
        </el-input>
      </el-form-item>
      <el-form-item label="高" prop="measureHigh">
        <el-input v-model="form.measureHigh" placeholder="请输入高">
          <template slot="append">米</template>
        </el-input>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  addCarModelsList,
  getCarModelsDetail,
  updateCarModelsDetail
} from '@/api/CarModels'
export default {
  name: 'FreightDialog',
  props: {
    // 弹窗标题
    title: {
      type: String,
      default: '新增模板'
    },
    // 是否显示弹窗
    showDialog: {
      type: Boolean,
      default: false
    },
    detailId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 表单数据
      form: {
        // 准载重量
        allowableLoad: null,
        // 准载体积
        allowableVolume: null,
        // 高
        measureHigh: null,
        // 长
        measureLong: null,
        // 宽
        measureWidth: null,
        // 车辆类型名称
        name: ''
      },
      rules: {
        // 准载重量
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]\d{0,1}$/,
            message: '只可输入1-100之间的整数',
            trigger: ['blur', 'change']
          }
        ],
        // 准载体积
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' },
          {
            pattern: /^[0-9]\d{0,1}$/,
            message: '只可输入1-100之间的整数',
            trigger: ['blur', 'change']
          }
        ],
        // 车辆类型名称
        name: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取车型详情数据并回填
    async getCarModelsDetail() {
      const res = await getCarModelsDetail(this.detailId)
      // console.log(res.data)
      this.form = res.data
    },
    async confirm() {
      // 表单校验
      await this.$refs.form.validate()
      console.log('表单校验 => 成功')
      console.log(this.$refs.form)
      if (this.$refs.form) {
        this.$message.warning('演示数据不可修改')
        return
      }

      if (this.title === '新增车型') {
        await addCarModelsList(this.form)
        this.$message.success('添加成功')
      } else {
        console.log('111')
        await updateCarModelsDetail({ ...this.from, id: this.detailId })
        this.$message.success('编辑成功')
      }
      this.$emit('update')
      // 关闭弹窗
      this.close()
    },
    close() {
      // 重置表单
      this.form.allowableLoad = null
      this.form.allowableVolume = null
      this.form.measureHigh = null
      this.form.measureLong = null
      this.form.measureWidth = null
      this.form.name = ''
      // this.$refs.form.resetFields()
      // 关闭弹窗
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
</style>
